<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>Login</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""
    />
    <script src="js/axios.min.js"></script>
    <script src="js/query.js"></script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link rel="stylesheet" href="css/fontawesome-all.css">
    <!-- Font-Awesome-Icons-CSS -->
    <script>
        var classId;
        var homeId;

        var addClassId;
        var addHomeId;

        var homeId2;
        window.onload = function () {
            findAll(1);
            findRoom();
            findClass();
        }

        function g() {
            $n("addDiv").style.visibility = "visible";
        }

        function g_2() {
            $n("addDiv").style.visibility = "hidden";
        }

        function g_3() {
            $n("findDiv").style.visibility = "hidden";
        }

        function g_4(id) {
            $n("findDiv").style.visibility = "visible";
            all(id);
        }

        function g_5() {
            $n("changeDiv").style.visibility = "hidden";
        }

        function g_6(id) {
            $n("changeDiv").style.visibility = "visible";
            all2(id);
            axios.get("room/findAllOkRoom").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    if (n.maxStu > n.stuNum && n.type === $n("sex_3").value) {
                        str += `<option>${n.address}</option>`;
                        homeId = n.id;
                    }
                });
                $n("stuRoom_3").innerHTML = str;
            });
        }

        function findAll(num) {
            axios.get("stu/findByItem", {
                params: {
                    pageNo: num,
                    name: $n("stuName").value,
                    className: $n("className").value,
                    roomAddress: $n("room").value
                }
            }).then(resp => {
                var info = resp.data;
                var str = "";
                info.list.forEach(n => {
                    str += `<tr><td>${n.name}</td><td>${n.sex}</td><td>${n.classBean.name}</td><td>${n.roomBean.address}</td><td>${n.phoneNum}</td>
            <td><input type="button" value="退房" onclick="del(${n.id})"></td><td><input type="button" value="换房" onclick="g_6(${n.id})"></td><td><input type="button" value="信息" onclick="g_4(${n.id})"></td></tr>`;
                });
                $n("data").innerHTML = str;
                var custr = "";
                for (var i = 1; i <= info.totalPage; i++) {
                    custr += `<a href="javascript:findAll(${i})" style="color:blue;margin-left: 10px">${i}</a>`;
                }
                $n("cutDiv").innerHTML = custr;
            });
        }

        function findRoom() {
            axios.get("room/findAllOkRoom").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    if (n.maxStu > n.stuNum && n.type === $n("sex").value) {
                        str += `<option>${n.address}</option>`;
                        homeId = n.id;
                    }
                });
                $n("stuRoom").innerHTML = str;
            })
        }

        function findClass() {
            axios.get("class/findAll").then(resp => {
                var info = resp.data;
                var str = "";
                info.forEach(n => {
                    str += `<option>${n.name}</option>`
                    classId = n.id;
                });
                $n("class").innerHTML = str;
            })
        }

        function add() {
            //    创建上传文件对象
            let formObj = new FormData();
            //    添加表单数据
            formObj.append("name", $n("name").value);
            formObj.append("sex", $n("sex").value);
            formObj.append("room", homeId);
            formObj.append("className", classId);
            formObj.append("phone", $n("phone").value);
            formObj.append("face", $n("faceImg").files[0]);

            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            }
            axios.post("stu/add", formObj, config);

            alert("添加成功");
            g_2();
            findAll(1);
        }

        function getClassId() {
            axios.get("class/byName", {
                params: {
                    name: $n("class").value
                }
            }).then(resp => {
                var info = resp.data;
                addClassId = info;
            });
        }

        function getRoomId() {
            axios.get("room/byName", {
                params: {
                    name: $n("stuRoom").value
                }
            }).then(resp => {
                var info = resp.data;
                addHomeId = info;
            });
        }

        function del(id) {
            axios.get("stu/del", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                console.log(info);
                if (info === "OK") {
                    alert("删除成功");
                } else if (info === "NO") {
                    alert("删除失败");
                }
                findAll(1);
            });
        }

        function changeRoom() {
            axios.get("stu/changeRoom", {
                params: {
                    studentId: homeId2,
                    roomId: homeId
                }
            });
            alert("修改成功");
            g_5();
            findAll(1);
        }

        function all(id) {
            axios.get("stu/findById", {
                params: {
                    id: id
                }
            }).then(resp => {
                var info = resp.data;
                // alert(info);
                console.log(info);
                $n("name_2").value = info.name;
                $n("sex_2").value = info.sex;
                $n("stuRoom_2").value = info.roomBean.address;
                $n("class_2").value = info.classBean.name;
                $n("facePic_2").src = "/face/" + info.faceImg;
                $n("phone_2").value = info.phoneNum;
            })
        }

        function all2(id) {
            axios.get("stu/findById", {
                params: {
                    id: id
                }
            }).then(resp => {
                homeId2 = id;
                var info = resp.data;
                $n("name_3").value = info.name;
                $n("sex_3").value = info.sex;
                $n("stuRoom_3").value = info.roomBean.address;
                $n("class_3").value = info.classBean.name;
                $n("facePic_3").scr = info.faceImg;
                $n("phone_3").value = info.phoneNum;
            })
        }

        function fileChange() {
            var reader = new FileReader();//定义文件读取流对象
            reader.readAsDataURL($n("faceImg").files[0]);
            reader.onload = function (ev) {
                $n("facePic").src = ev.target.result;
            }
        }
    </script>
</head>

<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>

<div style="margin-left: 200px;margin-top: 100px;background-color: white;width: 500px;height: 300px;text-align: center">
    <table style="width: 500px">
        <tr style="border: 5px solid black">
            <th>姓名</th>
            <th>性别</th>
            <th>班级</th>
            <th>所在房间</th>
            <th>联系电话</th>
            <th>操作</th>
        </tr>
        <tr style="height: 30px ;width: auto"></tr>
        <tbody id="data" style="text-align: center;margin-top: 30px">

        </tbody>
    </table>
    <div id="cutDiv" style="background-color: white;position: absolute;left: 220px;top: 350px"></div>
    <div style="width: 250px;height: 250px;background-color: white; position: absolute;right: 0;bottom: 0;border: 2px solid black;text-align: center">
        <h3 style="margin-bottom: 30px">查询学生信息</h3>
        <div style="text-align: left;margin-bottom: 30px;margin-left: 10px">
            学生姓名：<input type="text" id="stuName" value=""><br>
            班级：<input type="text" id="className" value=""><br>
            所在房间：<input type="text" id="room" value=""><br>
        </div>
        <input type="button" value="查询" onclick="findAll(1)">
    </div>
</div>


<div style="text-align: center;width:700px">
    <input type="button" value="学生入住" onclick="g()">
</div>


<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="addDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        姓名：<input type="text" id="name"><br>
        性别：<select id="sex" onchange="findRoom()">
        <option>男</option>
        <option>女</option>
    </select><br>
        房间：<select id="stuRoom" onchange="getRoomId()">

    </select><br>
        班级：<select id="class" onchange="getClassId()">

    </select><br>
        <img src="" id="facePic" width="100px" height="100px">
        <br>
        <input type="file" id="faceImg" onchange="fileChange()"><br>
        联系电话：<input type="text" id="phone"><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="返回" onclick="g_2()">
    </div>
</div>


<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="findDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
           width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        姓名：<input type="text" id="name_2" value="" disabled><br>
        性别：<input type="text" id="sex_2" value="" disabled><br>
        房间：<input type="text" id="stuRoom_2" value="" disabled><br>
        班级：<input type="text" id="class_2" value="" disabled><br>
        <img src="" id="facePic_2" width="100px" height="100px">
        <br>
        联系电话：<input type="text" id="phone_2" readonly value="" disabled><br>
        <input type="button" value="返回" onclick="g_3()">
    </div>
</div>


<div style="background-color:black;width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            " id="changeDiv">
    <div style=" border: 3px solid #000;
            width: 400px;
            height: 300px;
            padding: 50px;
           width: 400px;
            height: 300px;
            padding: 50px;
            background-color: white;">
        姓名：<input type="text" id="name_3" value="" disabled><br>
        性别：<input type="text" id="sex_3" value="" disabled><br>
        房间：<select id="stuRoom_3" onchange="getRoomId()">

    </select><br>
        班级：<input type="text" id="class_3" value="" disabled><br>
        <img src="" id="facePic_3" width="100px" height="100px" disabled="">
        <br>
        联系电话：<input type="text" id="phone_3" readonly value="" disabled><br>

        <input type="button" value="返回" onclick="g_5()">
        <input type="button" value="修改" onclick="changeRoom()">
    </div>
</div>
<!-- //content -->

<!-- Jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- //Jquery -->

<!-- effect js -->
<script src="js/canva_moving_effect.js"></script>
<!-- //effect js -->
</body>
</html>